<template>
  <div class="middle">
    <div class="middlebg"></div>
    <!--头部-->
    <div class="top">
      <span class="teacherPlan">家庭作业 <i class="el-icon-arrow-right"></i></span>
      <span>查看作业</span>
      <span class="back" @click="back">返回</span>
    </div>
    <el-card class="box-card"  v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
      <div class="grade">
        <span>班级</span>
        <span>{{grade}}</span>
        <span>学周</span>
        <span>第{{weeks}}学周</span>
      </div>
      <div class="work">
        <span>作业</span>
        <span>{{content}}</span>
      </div>
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="count" name="first">
          <div class="student"  v-model="complete" v-for="item in complete">
            <div>{{item.stuName}}</div>
            <div>{{item.sex}}</div>
            <div>{{item.time }}</div>
            <div><el-button class="btn" type="primary" plain size="mini" @click="watch(item.student_id)">查看</el-button></div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="notCount" name="second">
          <div class="student" v-model="notComplete" v-for="item in notComplete">
            <div>{{item.stuName}}</div>
            <div>{{item.sex}}</div>
            <!--<div>2019-01-02</div>-->
            <!--<div><el-button class="btn" type="primary" plain size="mini" @click="watch()">查看</el-button></div>-->
          </div>

        </el-tab-pane>
      </el-tabs>
      <!--查看每个学生作业情况-->
      <el-dialog class="dialog" title="查看作业" :visible.sync="dialogFormVisible"  v-model="message">
          <div>
            <span>学生</span>
            <span>{{message.student_name}}</span>
            <span>提交时间</span>
            <span>{{message.time}}</span>
          </div>
          <div>
            <span>作业状况</span>
            <span class="finish">已完成</span>
          </div>
          <div>
            <span>作业备注</span>
            <span>{{message.comment}}</span>
          </div>

      </el-dialog>
    </el-card>

  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        rule:'',
        activeName: 'first',
        dialogFormVisible:false,
        teacher_id:'',
        grade:'',
        weeks:'',
        content:'',
        count:'',
        notCount:'',
        complete:[],
        notComplete:[],
        message:[],
        loading:true,
      }
    },
    methods:{
      getHomework(){
        var id = this.$route.params.id
        console.log(id)
        this.$http.post('/api/homework/homeworkSelect',{
          id:id,
          teacher_id:this.teacher_id
        }).then(res=>{
          this.grade = res.data.grade
          this.weeks = res.data.weeks
          this.content = res.data.content
          this.count ='已交'+'('+ res.data.count+')'
          var notCount = res.data.studentCount - res.data.count
          this.notCount = '未交('+notCount+')'
          this.complete = res.data.complete
          this.notComplete = res.data.notComplete
          this.loading = false
        })
      },
      //返回上一页
      back () {
        this.$router.push({name: 'homework'})
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      watch(student_id){
        var id = this.$route.params.id
        this.$http.post('/api/homework/homeworkComment',{
          student_id:student_id,
          homework_id:id,
        }).then(res=>{
          this.message=res.data
        })
        this.dialogFormVisible = true
      },
    },
    created(){
      this.rule = localStorage.getItem('rule')
      this.teacher_id = localStorage.getItem('teacher_id')
      this.getHomework()
    }
  }
</script>
<style>
  .el-main {
    padding: 0;
  }
  .middle {
    height: 100%;
    width: 100%;
    background-repeat:repeat;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
  }
</style>
<style lang="less" scoped>
  .middlebg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../../assets/image/bg-img.png) no-repeat center;
    background-size: 100%;
  }
  .top {
    height: 50px;
    line-height: 50px;
    background-color: #dbdbdb;
    position: relative;
    .teacherPlan {
      display: inline-block;
      background: #00b02d;
      padding:0 15px;
      color: #fff;
    }
    .addTeacherPlan {
      display: inline-block;
      background: #3A8EE6;
      height: 24px;
      line-height: 24px;
      position: absolute;
      right: 100px;
      top: 10px;
      padding: 3px 15px;
      font-size: 14px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }
    .back {
      position: absolute;
      right: 0;
      background: #9cbf83;
      padding: 0 15px;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
    }
  }
  .box-card {
    margin: 30px 50px;
    /deep/.el-card__body {
      padding: 0;
    }
    .grade {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      span:nth-child(2n-1){
        display: inline-block;
        width: 60px;
        text-align: center;
        color: #666;
      }
      span:nth-child(2n){
        display: inline-block;
        padding-right: 30px;
        color: #333;
      }
    }
    .work {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #666;
      span:nth-child(1){
        display: inline-block;
        width: 60px;
        text-align: center;
        color: #666;
      }
      span:nth-child(2){
        display: inline-block;
        padding-right: 30px;
        color: #333;
      }
    }
    .tabs {
      /deep/div#tab-first {
        width: 100px;
        text-align: center;
      }
      /deep/div#tab-second {
        width: 100px;
        text-align: center;
      }
      .student {
        width: 400px;
        border: 1px solid #409EFF;
        display: flex;
        justify-content: center;
        height: 50px;
        line-height: 50px;
        margin:10px 100px 20px;
        float: left;
        div {
          margin: 0 15px;
        }
      }
    }
    .dialog {
      div {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        span:nth-child(2n-1){
          display: inline-block;
          width: 80px;
          text-align: right;
          padding-right: 20px;
        }
        span:nth-child(2n) {
          padding-right: 100px;
          color: #333;
        }
      }
      div:nth-child(2){
         .finish {
           color: #409EFF;
         }
       }
      div:nth-child(3){
        height: 100px;
        border-bottom: none;
      }
    }
  }


</style>
